<template>
  <div>
    <div class="box">
      <p>给我们留言</p>
      <van-icon name="arrow-down" @click="back"/>
    </div>
    <div class="txt">
      您好，很抱歉我们暂时无法为您提供服务，如需帮助，请留言，
      <br />我们将尽快联系并解决您的问题
    </div>
    <div class="box3">手机</div>
    <div class="box4">
      <van-cell-group>
        <van-field placeholder="请输入" class="btn" />
      </van-cell-group>
    </div>

    <div class="box3">留言内容</div>
    <div class="box4">
      <van-cell-group>
        <van-field placeholder="请输入" class="btn1" />
      </van-cell-group>
    </div>
    <van-form @submit="onSubmit">
      <div style="margin: 16px;">
        <van-button  block type="info" native-type="submit" class="tijiao">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      value: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    back(){
      history.back()
    }
  },
};
</script>

<style lang="scss" scoped>
body {
  background: rgb(240, 242, 245);
}
.box {
  width: 97%;
  height: 12vw;
  padding: 10px;
  background: rgb(0, 122, 255);
  color: white;
  position: relative;
  top: 0px;
  font-size: 25px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.txt {
  width: 95%;
  height: 100px;
  // border:1px solid red;
  font-size: 25px;
  position: relative;
  top: 20px;
  left: 30px;
}
.box3 {
  width: 95%;
  height: 50px;
  // border:1px solid red;
  position: relative;
  left: 30px;
  font-size: 30px;
}
.btn {
  width: 95%;
  height: 80px;
  font-size: 30px;
  padding-top: 20px;
}
.btn1 {
  width: 95%;
  height: 150px;
  font-size: 30px;
  padding-top: 20px;
}

.tijiao {
  height: 80px;
}
</style>